<template>
	<div class="container">
		<div class="head">
			<div class="add">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="dialogOpen('add')"
					>新增</el-button
				>
			</div>

			<div class="search">
				<el-input
					class="searchInput"
					prefix-icon="el-icon-search"
					v-model="searchValues"
					placeholder="输入IP"
				>
				</el-input>
			</div>
		</div>

		<el-table :data="tableData" border style="width: 100%">
			<template v-for="item in tableItem">
				<el-table-column
					:prop="item.prop"
					:label="item.label"
					:fit="true"
					:key="item.ID"
					align="center"
					v-if="item.isShow"
				>
					<template v-slot="scope">
						<template v-if="item.prop == 'edit'">
							<el-button
								type="warning"
								@click="dialogOpen('edit', scope.row)"
								>编辑</el-button
							>
							<el-button
								type="danger"
								@click="tableDelect(scope.row.ID)"
								>删除</el-button
							>
						</template>
						<template v-else-if="item.prop == 'WARNLOG'">
							<el-tag type="danger" @click="openInfoDialog(scope.row)">{{
								scope.row[item.prop]
							}}</el-tag>

							
						</template>
						<template v-else-if="item.prop == 'STATUS'">
							<template v-if="scope.row[item.prop] == '1'">
								<el-tag
									type="success"
									@click="servicess(scope.row)"
									>监控中</el-tag
								>
							</template>
							<template v-if="scope.row[item.prop] == '0'">
								<el-tag
									type="danger"
									@click="servicess(scope.row)"
									>待开启</el-tag
								>
							</template>
						</template>
						<template v-else>
							{{ scope.row[item.prop] }}
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<v-Dialog
			:title="title"
			:dialogVisible="dialogVisible"
			:formatData="formatData"
			@dialogClose="dialogClose"
		></v-Dialog>
		<v-LogInfoDialog :InfoData="LogInfoData" :outerVisible="outerVisible" @InfoDialog="openInfoDialog" @closeOuterVisible="closeInfoDialog" ></v-LogInfoDialog>

		<v-pagination
			:dataTotal="dataTotal"
			:curPage="postData.curPage"
			:pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage"
			@getPageSize="getPaginationPageSize"
		>
		</v-pagination>
	</div>
</template>

<script>
import vPagination from 'common/Pagination.vue';
import { tableItem } from './tableItem.js';
import vDialog from './dialog.vue';
import vLogInfoDialog from './logInfoDialog'
export default {
	components: {
		vPagination,
		vDialog,
		vLogInfoDialog
	},
	data() {
		return {
			tableData: [
				{
					ID: '1',
					IP: '192.168.1.2',
					LOGNAME: '/wgcloudTest/wgcloud-v3.3.1/server/log',
					WARNLOG: '10000',
					STATUS: 0,
					REMARK: '123456',
					UPDATADATE: '2021-04-13',
				},
				{
					ID: '2',
					IP: '192.168.1.3',
					LOGNAME: '/usr/local/nginx/log/access.log',
					WARNLOG: '10010',
					STATUS: 0,
					REMARK: '123456',
					UPDATADATE: '2021-04-13',
				},
				{
					ID: '3',
					IP: '192.168.1.4',
					LOGNAME: '/mnt/frp/frpcWinSW.out.log',
					WARNLOG: '10086',
					STATUS: 1,
					REMARK: '123456',
					UPDATADATE: '2021-04-13',
				},
			],
			tableItem: tableItem,
			title: '',
			dialogVisible: false,
			formatData: {
				ID: '',
				IP: '',
				LOGNAME: '',
				WARNLOG: '',
				STATUS: '',
				REMARK: '',
				UPDATADATE: '',
			},
			searchValues: '',
			postData: {
				opera: '',
				curPage: 1,
				pageSize: 10000,
				sort: {
					sortColumn: '',
					sortOrders: '',
				},
				filtersType: 'exactquery', // 精确查询
				filters: {},
			},
			dataTotal: 100,
			LogInfoData:{
				IP:'',
				LOGNAME:'',
				postData: {
				opera: '',
				curPage: 1,
				pageSize: 10000,
			
			},
			dataTotal:200,
				data:[{
					id:'1',
					logPath:'/wgcloudTest/wgcloud-v3.3.1/server/log/wgcloud.2021-04-23.0.log1',
					creteTime:'2021-04-23 09:34:29',
					WarningLogContent:'8870,8879,8906,8913,8922,8949行出现告警关键字:Exception1'
				},
				{
					id:'1',
					logPath:'/wgcloudTest/wgcloud-v3.3.1/server/log/wgcloud.2021-04-23.0.log2',
					creteTime:'2021-04-23 09:34:29',
					WarningLogContent:'8870,8879,8906,8913,8922,8949行出现告警关键字:Exception2'
				},
				{
					id:'1',
					logPath:'/wgcloudTest/wgcloud-v3.3.1/server/log/wgcloud.2021-04-23.0.log3',
					creteTime:'2021-04-23 09:34:29',
					WarningLogContent:'8870,8879,8906,8913,8922,8949行出现告警关键字:Exception3'
				},
				{
					id:'1',
					logPath:'/wgcloudTest/wgcloud-v3.3.1/server/log/wgcloud.2021-04-23.0.log4',
					creteTime:'2021-04-23 09:34:29',
					WarningLogContent:'8870,8879,8906,8913,8922,8949行出现告警关键字:Exception'
				}
				]

			},
			outerVisible:false
		};
	},
	methods: {
		dialogOpen(type, data) {
			switch (type) {
				case 'add':
					this.title = '添加';
					this.dialogVisible = true;
					break;
				case 'edit':
					this.title = '编辑';
					this.formatData = { ...data };
					this.dialogVisible = true;

					break;
			}
		},
		dialogClose() {
			this.dialogVisible = false;
			for (const key in this.formatData) {
				if (this.formatData.hasOwnProperty.call(this.formatData, key)) {
					this.formatData[key] = '';
				}
			}
		},
		// tableEdit(data) {

		//     this.dialogVisible=true
		//     //避免传址
		//     this.formatData={...data}
		// },
		// dialogEditClose(data) {

		//     this.dialogVisible=true
		//     //避免传址
		//     this.formatData={...data}
		// },
		tableDelect(id) {
			this.$confirm('确定删除？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '删除成功',
					});
				})
				.catch(() => {
					this.$message({
						type: 'error',
						message: '删除失败',
					});
				});
		},
		servicess(status) {
			// console.log(status)
			switch (status.STATUS) {
				case 1:
					this.$confirm('是否关闭?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
						.then(() => {
							status.STATUS = 0;
							this.$message({
								type: 'success',
								message: '关闭成功!',
							});
						})
						.catch(() => {
							this.$message({
								type: 'error',
								message: '关闭失败',
							});
						});

					break;
				case 0:
					this.$confirm('是否开启?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
						.then(() => {
							status.STATUS = 1;
							this.$message({
								type: 'success',
								message: '开启成功!',
							});
						})
						.catch(() => {
							this.$message({
								type: 'error',
								message: '开启失败',
							});
						});
					break;
			}
		},
		getLogData() {},
		getPaginationCurPage(val) {
			this.postData.curPage = val;

			this.getLogData();
		},
		getPaginationPageSize(val) {
			// 分页大小改变之后，重置当前页码为 1
			this.postData.curPage = 1;
			this.postData.pageSize = val;

			this.getLogData();
		},
		openInfoDialog(row){
			this.LogInfoData.IP=row.IP
			this.LogInfoData.LOGNAME=row.LOGNAME
			this.outerVisible=true

		},
		closeInfoDialog(){
			this.outerVisible=false
		}
	},
};
</script>

<style>
.head {
	display: grid;
	width: 20vw;
	grid-template-columns: 1fr 2fr;
	margin-bottom: 20px;
}
</style>
